.detailContainer{
  position: relative;
  width: 100vw;
  height: 100vh;
  .detailBox{
    position: relative;
    height: 188Px;
    .bg{
      position: relative;
      width:100%;
      height:188Px;
      overflow: hidden;
      &>Image,img{
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 100%;
        -webkit-filter: blur(10px); /* Chrome, Opera */
        -moz-filter: blur(-10px);
         -ms-filter: blur(-10px);
             filter: blur(-10px);
        transform:scale(2);
        z-index:-1,
      }
       .blurBg{
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 100%;
        z-index:0;
        background-color: #333;
        opacity: 0.6;
      }
       .detailContent{
        position: absolute;
        z-index:10;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 188Px;
        padding-left: 25px;
        &>Image.poster{
          width:220px;
          height:300px;
          filter: blur(0px);
          background-color: #fff;
        }
        & .detailInfo{
          flex:1;
          color: #fff;
          margin-left:25px;
          opacity: 0.9;
          .title{
            width: 100%;
            font-size:0.95rem;
            font-weight:700;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .star{
            font-size:0.65rem;
            margin-top:12px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .comment{
            font-size:0.85rem;
            font-weight: 700;
            color: #fc0;
            margin-top:12px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .type,.hours,.time{
            font-size:0.65rem;
            margin-top:12px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .introduce{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding-top:4%;
    .btn{
      width: 90%;
      height:2rem;
      line-height: 2rem;
      color: #fff;
      text-align: center;
      background-color: #e54847;
      font-size: 0.8rem;
      margin:0% 5% 3% 5%;
      border-radius: .3rem;
    }
    .introduceContent{
      width: 90%;
      height:4.2rem;
      overflow: hidden;
      padding: 0 5%;
      color: #868686;
      font-size: 0.75rem;
      transition: all 1s linear;
    }
    .showContent{
      height: auto !important;
    }
    .arrow{
      width: 100%;
      height: 1.6rem;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #f8f8f8;
      .icon{
        width: 0.5rem;
        height: 0.5rem;
        border-left: none;
        border-top:none;
        border-right: 2px solid #aaa;
        border-bottom:2px solid #aaa;
        transform: rotate(45deg);
        font-weight: 700;
      }
      .change{
        transform: rotate(-135deg) !important;
      }
    }
  }
  .line{
    width: 100%;
    height: 0.6rem;
    background-color:#f4f4f4;
  }

  .mediaContainer{
    border-bottom:1px solid #f4f4f4;
    .title{
      color: #666;
      font-size: 0.7rem;
      padding: 0.4rem 0.8rem;
      font-weight: 700;
    }
    .mediaPhoto{
      white-space: nowrap;
      margin-left: 0.8rem;
      .videoCon{
        display: inline-block;
        width: 140Px;
        height: 80Px;
        position: relative;
        padding-right: 10px;
        .playIcon{
          position:absolute;
          width: 40px;
          height: 40px;
          bottom:10px;
          right:10px;
        }
      }
      &>img,image{
        display: inline-block;
        width: 140Px;
        height: 80Px;
        padding-right: 10px;
      }
    }
    .count{
      display: flex;
      flex-direction: row;
      color: #666;
      font-size: 0.65rem;
      width:100%;
      height: 2.3rem;
      .video,.cinemaPic{
        flex: 1;
        height: 2.3rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        margin-left: 0.8rem;
        .desc{
          height: 2.3rem;
          line-height: 2.3rem;
        }
        .icon{
          width:0.3rem;
          height: 0.3rem;
          border-top:none;
          border-left:none;
          border-right:2px solid #666;
          border-bottom:2px solid #666;
          transform: rotate(-45deg);
        }
      }
    }
  }
  .musicCon{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 60Px;
    line-height: 60Px;
    .icon{
        width:0.3rem;
        height: 0.3rem;
        border-top:none;
        border-left:none;
        border-right:2px solid #666;
        border-bottom:2px solid #666;
        margin-right: 20px;
        transform: rotate(-45deg);
      }
    .content{
      flex:1;
      height: 60Px;
      .text{
        height: 60Px;
        line-height: 60Px;
        .bold{
          font-weight: 700;
          height: 30Px;
          line-height: 30Px;
        }
        .name{
          height: 20Px;
          line-height: 20Px;
        }
        .movieText{
          color: #666;
          font-size:0.65rem;
          padding-left:20px;
        }
      }
    }
    img,image{
      width: 25Px;
      height: 25Px;
      padding-left:30px;
    }
  }
  #video{
    width: 70%;
    height: 8.2rem;
    position:absolute;
    z-index: 999;
    top:9.6rem;
    left:15%;
    border:5px solid #fff;
    animation: show ease 0.5s;
  }
  @keyframes show{
    0%{
      transform: scale(0);
    }
    100%{
      transform: scale(1);
    }
  }
}
::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}
